<template>
    <!-- 顶部导航信息栏 -->
    <div class="top-container">
      <!-- 智务网图标 -->
      <img class="image1" src="https://img.js.design/assets/img/671df8670537cc86d3682dac.png#7092947e522146dc7186d5f194c6f1f9" alt="">

      <!-- 当前城市 -->
      <div class="now-city">
        <img class="image2" src="../assets/images/address.png" alt="">
        <div class="text1">{{ PersonData.city }}</div>
      </div>

      <!-- 切换城市 -->
      <div class="change-city">
        <img class="image3" src="../assets/images/changeCity.png" alt="">
        <div class="text2">切换城市</div>
      </div>

      <!-- 导航栏 -->
      <HomeNavbar class="home-navbar"></HomeNavbar>

      <!-- 立即发单 -->
      <div class="immediate-publish" :class="{ active: isPublishPage }" @click="isLogin">
        <router-link :to="PersonData.name === '登录' ? '/login' : '/publish'">立即发单</router-link>
      </div>

      <!-- 我的消息 -->
      <div class="person-message" :class="{ active: isMessagePage }" @click="isLogin">
        <router-link :to="PersonData.name === '登录' ? '/login' : '/message'">我的消息</router-link>
      </div>
      <!-- 用户头像 -->
      <router-link :to="PersonData.name === '登录' ? '/login' : '/user-center'"><img class="person-avatar" :src="PersonData.avatar" alt=""></router-link>
      <!-- 用户姓名 -->
      <div class="person-name">
        <router-link :to="PersonData.name === '登录' ? '/login' : '/user-center'">{{ PersonData.name }}</router-link>
      </div>
    </div>
</template>

<script>
import HomeNavbar from "../components/HomeNavbar.vue";
import {computed, ref, watchEffect} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

export default {
  name: "TopBar",  // 确保组件名一致
  components: {
    HomeNavbar
  },
  setup() {
    const store = useStore(); // 获取 Vuex 实例
    const userInfo = computed(() => store.getters.getUserInfo); // 获取 Vuex 中的 userInfo
    const PersonData = ref({ city: "", avatar: "", name: "" });
    // 动态更新 PersonData
    watchEffect(() => {
      PersonData.value = {
        city: userInfo.value?.city || "杭州",
        avatar: userInfo.value?.avatar || "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        name: userInfo.value?.name || "登录",
      };
    });
    const route = useRoute(); // 获取当前路由信息
    // 判断当前路由是否为 "立即发单" 页
    const isPublishPage = computed(() => route.path === '/publish');
    // 判断当前路由是否为 "我的消息" 页
    const isMessagePage = computed(() => route.path === '/message');

    const isLogin =() =>{
      if(PersonData.value.name === '登录'){
        alert('请先登录')
      }
    }

    return {
      PersonData,
      isPublishPage,
      isMessagePage,
      userInfo,
      isLogin
    };

  },
};
</script>

<style scoped>
.top-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 6.48vh;
  background: rgba(13, 127, 233, 1);
}
.image1 {
  position: absolute;
  left: 10.9375vw;
  top: 1.574vh;
  width: 6.667vw;
  height: 3.33vh;
}
.now-city {
  position: absolute;
  /*left: 19.22vw;*/
  left: 18.72vw;
  top: 2.22vh;
  /*width: 2.917vw;*/
  width: fit-content;
  height: 2.037vh;
}
.image2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.7vw;
}
.text1 {
  position: absolute;
  width: 3.8vw;
  left: 1.2vw;
  top: 0;
  height: 2.037vh;
  font-size: 0.801vw;
  font-weight: 700;
  line-height: 2.037vh;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: middle;
}
.change-city {
  position: absolute;
  /*left: 23.6vw;*/
  left: 24.5vw;
  top: 2.41vh;
  width: 3.54vw;
  height: 1.667vh;
  cursor: pointer;
}
.image3 {
  position: absolute;
  left: 0;
  top: 0.278vh;
  width: 0.625vw;
  height: 1.11vh;
}
.text2 {
  position: absolute;
  right: 0;
  top: 0;
  height: 1.667vh;
  font-size: 0.625vw;
  font-weight: 400;
  line-height: 1.667vh;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
}
.home-navbar {
  position: absolute;
  left: 29.48vw;
  top: 0;
  width: 29.33vw;
  height: 6.48vh;
}
.immediate-publish {
  position: absolute;
  height: 6.48vh;
  width: 5.83vw;
  right: 24.63vw;
  top: 0;
  font-size: 0.833vw;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 6.48vh;
}
.immediate-publish:hover{
  background-color: rgba(16, 112, 222, 1);
  font-weight: 700;
}
.person-message {
  position: absolute;
  height: 6.48vh;
  width: 5.83vw;
  right: 18.8vw;
  top: 0;
  font-size: 0.833vw;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 6.48vh;
}
.person-message:hover{
  background-color: rgba(16, 112, 222, 1);
  font-weight: 700;
}
.person-avatar {
  position: absolute;
  right: 14.11vw;
  top: 1.3vh;
  width: 3.89vh;
  height: 3.89vh;
  border-radius: 50%;
}
.person-name {
  position: absolute;
  right: 10.9375vw;
  top: 2.13vh;
  width: 2.552vw;
  height: 2.22vh;
  font-size: 0.833vw;
  line-height: 2.22vh;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  vertical-align: middle;
}
.immediate-publish.active,
.person-message.active {
  background-color: rgba(0, 95, 204, 1);
  font-weight: 700;
}
</style>
